<template>
  <div class="host">
    <el-row :gutter="20" class="wrap-row">
      <el-col :span="16">
        <div class="box">
          <div class="title">
            <span>任务池</span>
            <el-button type="text" @click="handleConfigure('poolRef')">配置</el-button>
          </div>
          <el-row :gutter="20">
            <el-col v-for="(i, idx) in poolArr" :key="idx" :span="8">
              <div class="box-content">
                <img :src="require(`@/assets/images/staging-0${idx + 1}.png`)" alt />
                <div class="content-info">
                  <p class="no-wrap-label">{{ i.numType }}</p>
                  <span class="font-blue">{{ i.num }}</span>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="box duty">
          <div class="title">
            <span>今日值班</span>
            <div>
              <i>2023年 9月10日</i>
              <el-button type="primary" size="mini">新增</el-button>
            </div>
          </div>
          <div class="rows">
            <div v-for="(i, idx) in poolArr" :key="idx" class="box-content">
              <img :src="require(`@/assets/images/staging-0${idx + 1}.png`)" alt />
              <div class="content-info">
                <u>
                  <b class="no-wrap-label">{{ i.title }}</b>
                  <i class="el-icon-phone">18600014401</i>
                </u>
                <i>{{ i.num }}</i>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="box">
          <div class="title">
            <span>快速导航</span>
            <el-button type="text" @click="handleConfigure('navRef')">配置</el-button>
          </div>
          <el-row :gutter="20">
            <el-col v-for="(i, idx) in navArr" :key="idx" :span="6">
              <div class="box-content desc" @click="handleNavLink(i)">
                <span>{{ i.fastName }}</span>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="box know">
          <div class="title">
            <span>知识检索及录入</span>
          </div>
          <div class="sp-flex m0">
            <el-input v-model="newQuery.keyword" size="small" @input="changeKeyWord" />
            <el-button type="primary" size="mini" @click="addKnow">新增</el-button>
          </div>

          <div class="rows">
            <div
              v-for="(i, idx) in knowData"
              :key="idx"
              class="hk-flex-column"
              style="cursor: pointer"
              @click="toKnow(i)">
              <div class="sp-flex m0">
                <span class="no-wrap-label">{{ i.title }}</span>
                <el-button type="text" size="small" icon="el-icon-view">{{ i.views }}</el-button>
              </div>
              <i class="text-overflow">{{ i.content || '-' }}</i>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="box last">
      <div class="title">
        <span>工单列表</span>
      </div>
      <div class="sp-flex m0">
        <el-tabs v-model="activeName" @tab-click="handleTabClick">
          <el-tab-pane label="我的待办" name="first" />
          <el-tab-pane label="所有工单" name="second" />
        </el-tabs>
        <div>
          <el-radio v-model="isUpdate" label="1" @click.native="handleChangeRadio($event)">刷新</el-radio>
          <el-select v-model="time" size="mini" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
      </div>
      <!-- <div class="m10" >
        <el-button type="primary" plain size="mini">即将逾期：0</el-button>
        <el-button type="success" plain size="mini">已逾期：0</el-button>
      </div> -->
      <div class="sp-flex m0">
        <search-form
          :data="queryParams"
          :field-list="filterInfo.fieldList"
          :list-type-info="dictList"
          @handleSearch="handleQuery"
          @handleReset="resetQuery" />
        <el-row>
          <el-button type="primary" size="mini" icon="el-icon-plus" @click="handleAdd">新增</el-button>
        </el-row>
      </div>

      <hk-table
        :table-data="tableData"
        :table-columns="tableList"
        :show-index="true"
        :total="total"
        :loading="loading"
        :table-height="80"
        operate
        :select-fn="selectFn"
        :common-fixed="true"
        :is-need-index="true"
        :selection="true"
        :operate-width="200"
        :query-params="queryParams"
        @changePage="getOrderData">
        <template #orderTitle="{ row }">
          <el-button
            type="text"
            style="width: 100%; text-align: left"
            :title="row.row.orderTitle"
            @click="handleView(row.row)"
            >{{ row.row.orderTitle }}</el-button
          >
        </template>
        <!-- 操作权限 -->
        <template #operate="scope">
          <!-- 是否显示处理  currentUserId == 当前登录用户的 ID  -->
          <el-button v-if="scope.row.row.isHandle == true" type="text" @click="handleView(scope.row.row)"
            >处理</el-button
          >
          <!--  <el-button
          v-if="scope.row.row.orderStatus != 3 && scope.row.row.cancellation==1 && !scope.row.row.isSystem"
          type="text"
          @click="handleRevoke(scope.row.row)"
        >撤销</el-button>
        <el-button
          v-if="!scope.row.row.isSystem"
          type="text"
          @click="handleCopy(scope.row.row)"
        >复制</el-button> -->
          <el-button
            v-if="scope.row.row.orderStatus != 3 && scope.row.row.isReassignment == 1"
            type="text"
            @click="handleTransfer(scope.row.row)"
            >强制转派</el-button
          >
        </template>
      </hk-table>
    </div>
    <Pool ref="poolRef" @handleSubmit="getPoolData" />
    <Nav ref="navRef" @handleSubmit="getNavData" />
  </div>
</template>

<script>
import HkTable from '@/components/Hk-Table/index'
import SearchForm from '@/components/HkSearchform/index.vue'
import Pool from './components/pool.vue'
import Nav from './components/nav.vue'
import { getPool, fastUrlNav, queryList, listAllFlowMap, pageList, knowPageList } from '@/api/specialProject/workBench'
export default {
  components: { HkTable, SearchForm, Pool, Nav },
  data() {
    return {
      prefix: window.prefix,
      loading: false,
      keyword: '',
      //   任务池
      poolArr: [],
      // 快速导航
      navArr: [],
      activeName: 'first',
      options: [
        { label: '1分钟', value: 1 },
        { label: '5分钟', value: 5 },
        { label: '10分钟', value: 10 },
      ],
      time: 1,
      isUpdate: '',
      queryParams: {
        current: 1,
        size: 10,
      },
      total: 0,
      filterInfo: {
        fieldList: [
          {
            label: '关键字',
            type: 'input',
            field: 'serialNumber',
            placeholder: '请输入运维人员人员名称',
            maxlength: 20,
          },
          { label: '流程名称', type: 'select', field: 'flowId', list: 'flowIdsLists' },
          { label: '流程状态', type: 'select', field: 'orderStatus', list: 'orderStatusLists' },
        ],
      },
      //  任务执行情况
      tableData: [],
      // 任务执行详情
      tableList: [
        { label: '流水号', param: 'serialNumber', width: '210' },
        { label: '工单标题', param: 'orderTitle', type: 'slot', width: 240 },
        { label: '流程名称', param: 'flowName', width: '240' },
        { label: '工单状态', param: 'orderStatus', type: 'slot', width: '110' },
        { label: '发起人', param: 'createUserName', width: '140' },
        { label: '发起时间', param: 'createTime', width: '200' },
        { label: '当前步骤', param: 'currentTaskName', width: '210' },
        { label: '当前处理人', param: 'currentHandlerName', width: '140' },
        { label: '更新时间', param: 'updateTime', width: '200' },
        { label: '通知状态', param: 'notifyStatus', width: '100', type: 'slot' },
      ],
      dictList: {
        orderStatusLists: [
          // { label: "已删除", value: -1 },
          { label: '处理中', value: 1 },
          // { label: '已撤销', value: 3 },
          { label: '已挂起', value: 4 },
          { label: '已完成', value: 2 },
        ],
        flowIdsLists: [],
      },
      allFlowMapLists: [],
      timer: null,
      newQuery: {
        current: 1,
        size: 10,
        approvalStatus: 1,

        keyWord: null,
      },
      knowData: [],
    }
  },
  mounted() {
    this.getPoolData()
    this.getKnowData()
    this.getOrderData()
    this.getListAllFlowMap()
    this.getNavData()
  },
  destroyed() {
    this.handleClearInterval()
  },
  methods: {
    addKnow() {
      window.history.pushState(null, ' ', window.knowfix + '/knowledgeBase/knowledgeBaseManagement')
      // window.location.reload()
    },
    toKnow(e) {
      var url =
        window.knowfix +
        '/knowledgeBase/knowledgeManagement?id=' +
        e.id +
        '&showType=' +
        e.showType +
        '&newTitle=知识浏览'
      window.history.pushState(null, ' ', url)
    },
    changeKeyWord(e) {
      this.newQuery.keyWord = e
      this.getKnowData()
    },
    getKnowData() {
      knowPageList(this.newQuery).then((res) => {
        const reg = /<(\/)?[^>]+>/g
        if (res?.list?.length > 0) {
          res.list.forEach((o) => {
            o.content = o.content.replaceAll(reg, '')
          })
        }
        this.knowData = res.list.splice(0, 5)
      })
    },
    // 获取任务池数据
    getPoolData() {
      getPool().then((res) => {
        this.poolArr = res
      })
    },
    // 获取快速导航列表
    getNavData() {
      fastUrlNav().then((res) => {
        this.navArr = res
      })
    },
    // 快速导航跳转
    handleNavLink(data) {
      window.history.pushState(null, ' ', data.fastUrl)
    },
    // 获取工单数据
    getOrderData() {
      let query = {}
      let flowIds = []
      if (this.queryParams.flowId) {
        flowIds = Object.values(this.allFlowMapLists[this.queryParams.flowId])[0]
      }

      if (this.activeName == 'first') {
        query = {
          current: this.queryParams.current,
          size: this.queryParams.size,
          orderStatus: this.queryParams.orderStatus,
          flowProcessIds: flowIds,
          isMyTodoTask: true,
        }
      } else {
        query = {
          current: this.queryParams.current,
          size: this.queryParams.size,
          orderStatus: this.queryParams.orderStatus,
          flowProcessIds: flowIds,
        }
      }
      this.loading = true
      queryList(query)
        .then((res) => {
          this.loading = false
          this.tableData = res.list
          this.total = res.total
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 获取流程列表
    getListAllFlowMap() {
      listAllFlowMap().then((res) => {
        this.allFlowMapLists = res
        //  流程下拉框
        this.dictList.flowIdsLists = this.allFlowMapLists.map((i, index) => {
          for (const key in i) {
            return { label: key, value: JSON.stringify(index) }
          }
        })
      })
    },
    //  查看工单
    handleView(row) {
      var url =
        window.orderapp +
        '/workOrder/workbench/listInfo?serialNumber=' +
        row.serialNumber +
        '&title=' +
        row.orderTitle +
        '&type=view'
      window.history.pushState(null, ' ', url)
      // this.$router.push({
      //   path: window.orderapp + '/workOrder/workbench/listInfo',
      //   query: {
      //     serialNumber: row.serialNumber,
      //     type: 'view',
      //     title: row.orderTitle,
      //   },
      // })
    },
    //  任务池配置
    handleConfigure(type) {
      this.$refs[type].show()
    },

    // 刷新
    handleChangeRadio(e) {
      if (e.target.tagName === 'INPUT') {
        if (this.isUpdate === '') {
          this.isUpdate = '1'
          this.handleSetInterval(this.time * 1000 * 60)
        } else {
          this.isUpdate = ''
          this.handleClearInterval()
        }
      }
    },
    handleSetInterval(time) {
      let _this = this
      this.timer = setInterval(function () {
        _this.getOrderData()
      }, time)
    },
    handleClearInterval() {
      clearInterval(this.timer)
    },
    handleTabClick() {
      this.getOrderData()
    },
    handleAdd() {},
    //  查询
    handleQuery() {
      this.queryParams.current = 1
      this.getOrderData()
    },
    resetQuery() {
      this.queryParams.current = 1
      this.queryParams.size = 10
      this.getOrderData()
    },
    // 复选框是否禁用
    selectFn(row, index) {
      return row.orderStatus !== 1 && row.isSystem == false
    },
  },
}
</script>

<style lang="scss" scoped>
#app.dark-theme {
  .box-content {
    background: #192b5f !important;
  }
  .no-wrap-label {
    color: #fff;
  }

  .text-overflow {
    color: #aaa !important;
  }
}

i {
  font-style: normal;
}
::v-deep .el-table {
  margin-top: 0px;
  min-height: 300px !important;
}
.host {
  overflow: auto;
  letter-spacing: 0.5px;
  width: 100%;
  height: 100%;
  background: #eef0f5;
  margin: 0 -10px;
  .wrap-row {
    display: flex;
    flex-wrap: wrap;
    align-content: stretch;
    margin: 0 !important;
    > .el-col {
      margin-bottom: 20px;
    }
  }
  .el-col {
    .box {
      height: 100%;
    }
  }
  .box {
    display: flex;
    flex-direction: column;
    background: #fff;
    padding: 20px;
    border-radius: 4px;

    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;

      margin-bottom: 20px;
      span {
        font-size: 16px;
        font-weight: 600;
      }
      i {
        margin-right: 10px;
      }
    }
  }
  .duty {
    max-height: 380px;
    overflow: auto;
    padding: 0;
    .title {
      padding: 20px 20px 0 20px;
    }
    .rows {
      flex: 1;
      overflow: auto;
      padding: 0 10px 10px;
      .box-content {
        padding: 10px;
        margin-bottom: 0;
        background: transparent;
        display: flex;
        align-items: stretch;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);
        img {
          width: 54px;
        }
        .content-info {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          u {
            font-weight: 500;
            display: flex;
            justify-content: space-between;
            i {
              font-size: 12px;
            }
            b {
              max-width: 60%;
            }
          }
          > i {
            color: #999999;
          }
        }
      }
    }
  }
  .sp-flex {
    margin-bottom: 20px;
    .el-input {
      width: 220px;
    }
    .no-wrap-label {
      max-width: 60%;
    }
  }
  .m10 {
    margin: 10px 0;
  }
  .m0 {
    margin-bottom: 0;
  }
  .know {
    max-height: 416px;
    overflow: auto;
    padding: 0;
    .title {
      padding: 20px 20px 0 20px;
    }
    > .sp-flex {
      padding: 0 20px;
    }
    .rows {
      overflow: auto;
      padding: 10px 10px 10px 20px;
    }
  }

  .box-content {
    background: #f3f5fb;
    border-radius: 4px;
    padding: 20px;
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    img {
      width: 70px;
      margin-right: 20px;
    }
  }
  .content-info {
    flex: 1;
    overflow: auto;

    span {
      font-size: 24px;
      line-height: 38px;
      font-weight: 500;
    }
    i,
    u {
      text-decoration: none;
    }
  }
}
.hk-flex-column {
  margin-bottom: 10px;
  i {
    color: rgba(0, 0, 0, 0.45);
  }
}
.desc {
  justify-content: center;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  span {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    text-align: center;
  }

  &.active {
    border: 1px solid rgba(75, 110, 239, 1);
    color: #4b6eef;
  }
}
.font-blue {
  color: #4b6eef;
}
.rest {
  margin: 0 !important;
  padding: 0 !important;
}
.no-wrap-label {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 600;
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.text-overflow {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.last {
  margin: 0 10px;
}
::v-deep {
  .el-tabs__nav-wrap::after {
    display: none;
  }
  .el-tabs__header {
    margin: 0;
  }
}
</style>
